<script type="text/x-template" id="poster-color">
    <div >
    <el-form :model="posterMerge" label-width="100px" :rules="rules" ref="posterMergeForm">
        <el-form-item label="上传海报">
            <el-upload class="upload-demo" accept="image/jpeg,image/jpg,image/png"
                       :limit="1"
                       drag
                       :auto-upload="false" ref="uploadPoster" action="" :on-change="uploadSectionFileForPoster" :on-remove="removeImageForPoster" list-type="picture-card">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <#--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->

            <#--<el-button size="small" type="primary" v-show="isUploadShowHide">点击上传</el-button>-->
            <#--<div slot="tip" class="el-upload__tip" v-show="isUploadShowHide" style="margin-top: -40px;idth: 300px;margin-left: 100px;text-align: left;color: red;">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
        </el-form-item>
        <el-form-item v-if="posterShow" label="取色">
            <el-color-picker  v-for="(row, index) in colors" v-model="row.color"></el-color-picker>
        </el-form-item>
        <el-form-item v-if="posterShow" label="最终取色">
            <el-color-picker  v-model="finalColor"></el-color-picker>
            <span style="font: bold">hsv: {{hsv}}</span>
            <span style="font: bold"> ,rgb: {{rgb}}</span>
        </el-form-item>
        <el-form-item v-if="posterShow" label="蒙层示例">
            <img style="float: left" referrerpolicy="no-referrer"  :src="cover_url"/>
            <img style="float: left" referrerpolicy="no-referrer"  :src="gradual_cover_base64_str"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click.native="submit" :loading="formLoading">确定</el-button>
        </el-form-item>
    </el-form>
        <div  v-if="posterShow">
            <cc-pie-chart  :options="pieOptions"></cc-pie-chart>
        </div>
    </div>
</script>

<script>
    Vue.component('poster-color', {
        template: '#poster-color',
        data: function () {
            return {
                finalColor: undefined,
                cover_url: undefined,
                gradual_cover_base64_str: undefined,
                rgb: undefined,
                hsv: undefined,
                colors:[],
                formLoading: false,
                posterShow: false,
                isUploadShowHide: true,
                posterMerge:{
                    posterBase64Str:''
                },
                options:[
                    {label : '左上',value: 'left_top'},
                    {label : '右上',value:'right_top'},
                ],
                rules: {
                    position: [
                        {required: true, message: '请选择角标位置'}
                    ],
                    title: [
                        {required: true, message: '请输入标题'}
                    ],
                    subTitle: [
                        {required: true, message: '请输入子标题'}
                    ],
                    detail: [
                        {required: true, message: '请输入简介'}
                    ],
                },
                urls: {
                    //分页数据接口
                    getColor: '/v1/aiPoster/getColor.html',
                },
                pieOptions: {
                    title: {
                        text: '海报颜色统计',
                        subtext: '',
                        x: 'left'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        left: 30,
                        top: 30,
                        bottom: 30,
                        data: [],
                        selected: {}
                    },
                    series: [
                        {
                            name: '颜色',
                            type: 'pie',
                            radius: '45%',
                            center: ['20%', '30%'],
                            data: [],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },

                pie:{
                    backgroundColor: '#2c343c',
                    visualMap: {
                        show: false,
                        min: 80,
                        max: 300,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '15%',
                            data:[
                                {value:235, name:'视频广告'},
                                {value:274, name:'联盟广告'},
                                {value:310, name:'邮件营销'},
                                {value:335, name:'直接访问'},
                                {value:400, name:'搜索引擎'}
                            ],
                            roseType: 'angle',
                            label: {
                                normal: {
                                    textStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#c23531',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            };
        },
        methods: {
            trimHeader(base64) {
                return base64.replace(/\r|\n/g, '').replace('data:image/jgp;base64,', '').replace('data:image/png;base64,', '').replace('data:image/jpeg;base64,','');
            },
            uploadSectionFileForPoster(file, fileList) {
                var _this = this
                var reader = new FileReader();
                reader.readAsDataURL(file.raw);
                console.log(file.raw)
                reader.onload = function(e){
                    this.result // 这个就是base64编码了
                    console.log(this.result)
                    _this.posterMerge.posterBase64Str = _this.trimHeader(this.result);
                }

            },
            removeImageForIcon(file, fileList){
                this.posterMerge.iconBase64Str =''
            },
            removeImageForPoster(file, fileList){
                this.posterMerge.posterBase64Str = ''
            },
            cancel(){

            },
            submit(){
                this.$refs.posterMergeForm.validate(function (valid) {
                    if (valid) {
                        if (this.posterMerge.posterBase64Str == undefined || this.posterMerge.posterBase64Str == ''){
                            this.$message({type: 'warning', message: "海报地址能不能为空"})
                        }else {
                            this.ajax(this.urls.getColor, {
                                jsonStr: JSON.stringify(this.posterMerge)
                            }, function (result) {
                                if (result.code == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: "操作成功！"
                                    })
                                    this.colors = result.data.colors
                                    this.cover_url = result.data.cover_base64_str
                                    this.gradual_cover_base64_str = result.data.gradual_cover_base64_str
                                    this.hsv = result.data.hsv
                                    this.rgb = result.data.rgb
                                    this.finalColor = result.data.final_color
                                    this.initCanvas(result.data.colors)
                                    this.posterShow = true
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: result.msg
                                    })
                                }
                            }.bind(this))
                        }
                    } else {
                        this.$message('请将表单填写完整');
                    }
                }.bind(this));
            },
            initCanvas(data) {
                var i = 0;
                var legendData = [];
                var seriesData = [];
                var selected = {};
                for (; i < data.length; i++) {
                    legendData.push(data[i].color);
                    var pair = {}
                    pair.name = data[i].color
                    var itemStyle= {}
                    itemStyle.color =  data[i].color
                    pair.itemStyle = itemStyle
                    pair.value = data[i].count
                    seriesData.push(pair);
                    selected[data[i].color] = data[i].count;
                }
                console.log(seriesData)
                this.pieOptions.legend.data = legendData;
                this.pieOptions.legend.selected = selected;
                this.pieOptions.series[0].data = seriesData;
            }
        },
        watch: {
        },
        mounted() {

        },
        computed: {
//            finalPieOptions: function () {
//                return this.pieOptions;
//            }
        },
        created() {

        }
    })
</script>

<style>

</style>